<!--
 * @Author: sunyan 
 * @Date: 2024-09-06 14:13:26
 * @LastEditors: sunyan 
 * @LastEditTime: 2024-09-09 12:02:52
 * @FilePath: /njbdc/src/views/home/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="">
    <van-nav-bar title="首页" left-arrow @click-left="onClickLeft" />
    <div class="homebag">
      <div class="hometop">
        <div class="topsearch"><van-icon style="margin-right: 5px;" name="search" />搜索</div>
        <div class="personcenter">
          <div class="centerinfo"><van-icon style="font-size: 24px;" name="user" /></div>个人中心
        </div>
      </div>
      <div class="switch">关怀版<van-switch style="margin-left: 5px;" v-model="checked" /></div>
    </div>
    <div class="news">
      <van-icon style="font-size: 20px;
    margin-right: 5px;" name="volume" class="iconline" />
      <div class="iconline iconText">公示公告公示公告</div><van-icon class="iconline arrow" name="arrow" />
    </div>
    <div class="rmyy">
      <div class="rmyy_name">热门应用</div>
      <div class="rmyyIcon">
        <div class="rm_item">
          <img class="rm_img" src="../../assets/images/wsyy.png" />
          <div>网上预约</div>
        </div>
        <div class="rm_item">
          <img class="rm_img" src="../../assets/images/yyqk.png" />
          <div>预约情况</div>
        </div>
        <div class="rm_item">
          <img class="rm_img" src="../../assets/images/bljd.png" />
          <div>办理进度</div>
        </div>
        <div class="rm_item">
          <img class="rm_img" src="../../assets/images/bdcqsb.png" />
          <div>不动产轻松办</div>
        </div>
      </div>
    </div>
    <img class="bswd" src="../../assets/images/bswd.png" />
    <div class="gzfc">
      <div class="gzfc_name">工作风采<span>更多>></span></div>
      <div class="gzfc_list">
        <div class="gzfc_left">
          <img src="../../assets/images/bg.jpg" />
        </div>
        <div class="gzfc_right">
          <div class="gzfc_tit">热情服务暖人心</div>
          <div class="gzfc_content">走进综合服务中心大厅，办证窗口总是忙碌而富有节奏，窗口的工作人员耐心细致地接待着每一名办事群众...</div>
          <div class="gzfc_bottom">
            <div class="view"><van-icon name="browsing-history" />208次</div>
            <div class="time">2023-03-21</div>
          </div>
        </div>
      </div>
      <div class="gzfc_list">
        <div class="gzfc_left">
          <img src="../../assets/images/bg.jpg" />
        </div>
        <div class="gzfc_right">
          <div class="gzfc_tit">热情服务暖人心</div>
          <div class="gzfc_content">走进综合服务中心大厅，办证窗口总是忙碌而富有节奏，窗口的工作人员耐心细致地接待着每一名办事群众...</div>
          <div class="gzfc_bottom">
            <div class="view"><van-icon name="browsing-history" />208次</div>
            <div class="time">2023-03-21</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bzfw">
      <div class="bzfw_name">E办证服务</div>
      <div class="bzfw_div">
        <div class="bzfw_box yth">
          <div class="bzfw_text">房地一体的抵押权首次登记</div>
        </div>
        <div class="bzfw_box">
          <div class="bzfw_text">房地一体的抵押权首次登记</div>
        </div>
      </div>
    </div>
    <!-- <van-tabbar v-model="activeShow" >
      <van-tabbar-item icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="user-o">个人中心</van-tabbar-item>
    </van-tabbar> -->
  </div>
</template>

<script>

export default {
  name: 'Index',
  data() {
    return {
      activeShow: 0,
      checked: true
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  }
}
</script>

<style lang="scss" scoped>
.homebag {
  width: 100%;
  height: 200px;
  background-image: url(../../assets/images/bg.jpg);
  background-size: 100% 100%;
  position: relative;

  .hometop {
    padding: 0 10px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .topsearch {
      background-color: rgba(202, 204, 199, 0.7);
      padding: 5px 15px;
      border-radius: 20px;
      color: #fff;
    }

    .personcenter {
      font-size: 14px;
      color: #5dcf74;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 20px;
    }

    .centerinfo {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #bae6b6;
      color: #fff;
      padding: 5px 8px;
    }
  }

  .switch {
    position: absolute;
    padding: 5px;
    border-radius: 20px;
    right: 10px;
    bottom: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    color: #ffff;
    background: rgba(93, 207, 116, 0.6);

    .switch .van-switch--on {
      background-color: #dbdbdb;
    }
  }
}

.news {
  background: #f0fff3;
  padding: 10px;
  overflow: hidden;
  width: 100%;
  color: #5dcf74;
  align-items: center;

  .iconline {
    float: left;
  }

  .arrow {
    float: right;
    margin-top: 5px;
  }

  .iconText {
    width: 80%;
  }
}

.rmyy {
  margin: 10px;

  .rmyy_name {
    font-size: 24px;
    font-weight: 700;
  }

  .rmyyIcon {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .rm_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .rm_img {
    width: 35px;
    height: 35px;
    margin: 20px 0 10px 0;
  }
}

.bswd {
  width: calc(100% - 20px);
  height: 100%;
  margin: 10px;
}

.gzfc {
  margin: 10px;

  .gzfc_name {
    font-size: 24px;
    font-weight: 700;

    span {
      float: right;
      font-weight: 400;
      font-size: 16px;
      color: #999;
    }
  }

  .gzfc_list {
    overflow: hidden;
    margin-top: 10px;
  }

  .gzfc_left,
  .gzfc_right {
    float: left;
  }

  .gzfc_left {
    width: 150px;
    height: 100px;
    margin-right: 10px;

    img {
      width: 100%;
      height: 100%;
      border-radius: 10px;
    }
  }

  .gzfc_right {
    width: calc(100% - 160px);

    .gzfc_tit {
      font-size: 18px;
      font-weight: 700;
    }

    .gzfc_content {
      height: 65px;
      overflow: hidden;
      margin-top: 5px;
    }

    .gzfc_bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #a9a9a9;
      padding: 10px 0;
      border-bottom: 1px solid #a9a9a9;
    }
  }
}

.bzfw {
  margin: 10px;

  .bzfw_name {
    font-size: 24px;
    font-weight: 700;
  }

  .bzfw_div {
    display: flex;
    margin: 10px 0;
    .bzfw_box{
      width: calc(50% - 5px);
      height: 70px;
      color: #fff;
      background: url(../../assets/images/ygsp.png);
      background-size: 100% 100%;
      .bzfw_text{
        width: 125px;
        margin: 15px 0 0 16px;
      }
    }
    .yth{
      width: calc(50% - 5px);
      margin-right: 10px;
      background-size: 100% 100% !important;
      background: url(../../assets/images/fdyt.png);
    }
  }
}
</style>
